<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane :label="title" name="tab-0">
      <div class="edit-handles-con">
        <el-collapse v-model="eventTabs">
          <el-collapse-item title="通用属性" name="cmmmon">
            <el-form class="margin-bottom-10">
              <input-normal label="组件类型" v-model="componentData.type" disabled="disabled"></input-normal>
              <input-normal label="组件id" v-model="getComId.id" @change="onChangeAttrId"></input-normal>
              <switch-normal v-model="commonAttr.isPageFixed" label="全局固定布局" @change="onChangeAttr"></switch-normal>
              <dropdown-normal label="方位类型" :valLists="POSITION_TYPES" v-model="commonAttr.positionType" @change="onChangeAttr"></dropdown-normal>
              <!-- <div v-if="siteAttrs.pageType == PAGE_TYPE.single && commonAttr.positionType == POSITION_TYPES[0].value"> -->
                <switch-normal v-model="commonAttr.isBottom" label="距离底部" @change="onChangeAttr"></switch-normal>
                <switch-normal v-model="commonAttr.isRight" label="距离右边" @change="onChangeAttr"></switch-normal>
                <input-normal v-if="commonAttr.isRight" label="距离右边距离" v-model="commonAttr.right" @change="onChangeAttr"></input-normal>
              <!-- </div> -->
              <input-normal label="属性关联id" v-model="commonAttr.relateAttrCompId" @change="onChangeAttr"></input-normal>
              <input-normal v-model="commonAttr.itemIndex" label="索引或键值" placeholder="0-9或uid、mid" @change="onChangeAttr"></input-normal>
              <input-normal label="事件关联id" v-model="commonAttr.relateEventCompId" @change="onChangeAttr"></input-normal>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="组件属性" name="comp">
            <slot></slot>
            <el-form>
              <el-divider content-position="center">通用属性</el-divider>
              <switch-normal v-model="commonAttr.isVisible" label="可见" @change="onChangeAttr"></switch-normal>
              <slider-normal v-model="commonAttr.opacity" label="透明度" :min="0" :max="1" :step="0.1" @change="onChangeAttr"></slider-normal>
              <dropdown-normal v-if="isFontFamily" label="字体" :valLists="fontFamilys" v-model="commonAttr.fontFamily" @change="onChangeAttr"></dropdown-normal>
              <textarea-normal v-if="isCustomFontStyle" label="自定义字体" placeholder="字体名，字体文件url" v-model="commonAttr.customFontStyle" @change="onChangeAttr"></textarea-normal>
              <template v-if="isTextStyle">
                <div class="text-style-group">
                  <el-radio-group v-model="textAlign" @change="onChangeAlign">
                    <el-radio-button v-for="(style, index) in textStyles" :checked="style.checked" :label="style.attr" :key="index"><i :class="style.icon"></i></el-radio-button>
                  </el-radio-group>
                  <el-checkbox-button v-for="(style, index) in textStyles_" v-model="style.checked" :key="index" @change="onChangeAlign(style)"><i :class="style.icon"></i></el-checkbox-button>
                </div>
              </template>
              <template v-if="isBorderStyle">
                <slider-normal v-model="commonAttr.borderRadius" label="圆角" :max="300" :step="1" @change="onChangeAttr"></slider-normal>
                <dropdown-normal v-model="commonAttr.borderStyle" :valLists="BORDER_STYLES" label="边框类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
                <template v-if="commonAttr.borderStyle != BORDER_STYLES[0].value">
                  <slider-normal v-model="commonAttr.borderSize" label="边框大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
                  <color-normal v-model="commonAttr.borderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
                </template>
              </template>
              <template v-if="isCustomCssStyle">
                <textarea-normal label="自定义css样式" placeholder="box-shadow:0 0 20px #f00;" v-model="commonAttr.customCssStr" @change="onChangeAttr"></textarea-normal>
              </template>
            </el-form>
          </el-collapse-item>
          <el-collapse-item
            v-for="(event, key, index) in getEventEditPanels"
            :key="index"
            :title="EVENT_ATTR[event.controlId].title"
            :name="'event-ui-' + index">
            <component :is="event.comType" :event="event" :index="index"></component>
          </el-collapse-item>
          <right-position></right-position>
        </el-collapse>
      </div>
    </el-tab-pane>
    <el-tab-pane label="动画" name="tab-1">
      <div class="edit-handles-con">
        <right-animate></right-animate>
      </div>
    </el-tab-pane>
    <el-tab-pane label="事件" name="tab-2">
      <div class="edit-handles-con">
        <right-events></right-events>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import RightEvents from '@/views/child/right/right-events.vue'
import RightPosition from '@/views/child/right/right-position.vue'
import RightAnimate from '@/views/child/right/right-animate.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'

import AddReposts from '@/views/components/add-reposts.vue'
import { editUtils } from '@/views/js/edit-utils'
import { isHasOwnProperty } from '@/plugins/utils'
import { mapState } from 'vuex'

export default {
  name: "RightTemplate",
  mixins: [editUtils],
  setup () {
    return {
      isDebug: process.env.NODE_ENV === 'production' ? false : true,
    }
  },
  components: {
    RightEvents,
    RightPosition,
    RightAnimate,
    InputNormal,
    TextareaNormal,
    SwitchNormal,
    DropdownNormal,
    SliderNormal,
    ColorNormal,
    AddReposts,
  },
  computed: {
    ...mapState({
    }),
    isFontFamily() {
      return isHasOwnProperty(this.commonAttr, 'fontFamily')
    },
    isCustomFontStyle() {
      return isHasOwnProperty(this.commonAttr, 'customFontStyle')
    },
    isTextStyle() {
      return isHasOwnProperty(this.commonAttr, 'textAlign')
    },
    isBorderStyle() {
      return isHasOwnProperty(this.commonAttr, 'borderStyle')
    },
    isCustomCssStyle() {
      return isHasOwnProperty(this.commonAttr, 'customCssStr')
    }
  },
};
</script>

